<template>
  <div class="app-container">
    <div style=" background: #f0f2f5;padding: 10px 20px;">
      <div style=" background: #fff;padding: 10px 15px;margin-bottom: 25px;">
        <div style="border-bottom: 1px solid #e8e8e8;padding: 5px 5px 10px;color: #4e4e4e;font-weight: bold;">
          店铺详情 ( {{ getPagesInfo.name }} )

          <el-button class="camera-btn" type="primary" @click="openNewWindow(getPagesInfo.url)" icon="el-icon-money"
                     circle title="摄像头"/>
        </div>
        <div class="house-info-wrap">
          <div class="house-img-desc">
            <div class="house-img">
              <!--<div class="house-title">小区图片:</div>-->
              <img class="img-style" :src="getPagesInfo.src" alt="">
            </div>
            <div class="house-desc">
              <div class="house-title">店铺描述:</div>
              <div class="desc-content">暂无</div>
              <br>
              <div class="house-title">基本信息:</div>
              <div class="desc-list">
                <!--<div><span>地址：</span>{{ getPagesInfo.address }}</div>-->
                <div class="info-width"><span>是否连锁：</span>否</div>
                <div class="info-width"><span>店家：</span>{{ getPagesInfo.doctor }}</div>
                <div class="info-width"><span>电话：</span>{{ getPagesInfo.tel }}</div>
                <div class="info-width"><span>地址：</span>{{ getPagesInfo.address }}</div>
                <div class="info-width"><span>实际控制人：</span>{{ getPagesInfo.legalperson }}</div>
                <div class="info-width"><span>营业时间：</span>{{ getPagesInfo.opendata }}</div>
                <!--<div class="info-width"><span>店面租赁期限：</span>{{ getPagesInfo.Leaseterm }}</div>-->
                <div class="info-width"><span>经营范围：</span>{{ getPagesInfo.Buscope }}</div>
                <div class="info-style"><span>经营地址：</span>{{ getPagesInfo.address }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 药物销售top 10-->
      <div class="trash-clear-warp">
        <div class="trash-title">销售统计</div>
        <div class="trash-content">
          <el-table :data="getPagesInfo.statistics" size="mini" border height="250" style="width: 100%">
            <el-table-column prop="month" label="月份"/>
            <el-table-column prop="order" label="订单数（单）"/>
            <el-table-column prop="money" label="销售额（万元）"/>
            <el-table-column prop="degree" label="客户满意度"/>
          </el-table>
        </div>
      </div>

      <!--销售药物列表-->
      <div class="trash-clear-warp">
        <!--<div class="trash-title">垃圾桶列表</div>-->
        <!--<div class="trash-content">-->
        <!--<el-table :data="TrashListData" :row-class-name="tableAddClass" size="mini" border height="250" style="width: 100%">-->
        <!--<el-table-column prop="number" label="编号" />-->
        <!--<el-table-column prop="name" label="药名" />-->
        <!--<el-table-column prop="state" label="满溢程度" />-->
        <!--</el-table>-->
      </div>
    </div>
  </div>
</template>

<script>
  // import { goodsList } from '@/api/village'
  import waves from '@/directive/waves' // waves directive
  import {parseTime} from '@/utils/index'

  export default {
    name: 'StoreIndex',
    directives: {waves},
    // eslint-disable-next-line vue/require-prop-types
    props: ['getPagesInfo'],
    data() {
      return {
        listLoading: true,
        isShow: true,
        clearTrashData: [
          {name: '1月', num: 210, num: 24, num: 120},
          {name: '2月', num: 210, num: 24, num: 120},
          {name: '3月', num: 210, num: 24, num: 120},
          {name: '4月', num: 210, num: 24, num: 120},
          {name: '5月', num: 210, num: 24, num: 120},
          {name: '6月', num: 210, num: 24, num: 120},
          {name: '7月', num: 210, num: 24, num: 120},
          {name: '8月', num: 210, num: 24, num: 120},
          {name: '9月', num: 210, num: 24, num: 120},
          {name: '10月', num: 210, num: 24, num: 120}
        ]
      }
    },
    created() {

      // this.getList()
    },
    mounted() {

    },
    methods: {
      formatDate(row, column) {
        return row.addTime > 0 ? parseTime(row.addTime, '{y}-{m}-{d} {h}:{i}:{s}') : ''
      },
      openNewWindow(url) {
        window.open(url, '_blank');
      }
    }
  }

</script>
<style scoped lang="scss" type="text/scss">
  .app-container {
    padding: 0px;
  }

  .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .demo-block-control {
    height: 40px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    margin-top: -1px;
    cursor: pointer;
    position: relative;
  }

  .house-img-desc {
    display: flex;

    .house-img {
      width: 400px;
      height: 200px;

      img {
        width: 400px;
        height: 200px;
      }
    }

    .house-desc {
      padding-left: 20px;
      padding-top: 10px;

      .house-title {
        font-weight: bold;
        line-height: 30px;
        font-size: 14px;
      }

      .desc-content {
        padding-left: 20px;
        font-size: 12px;
        line-height: 30px;
      }

      .desc-list {
        font-size: 12px;
        padding-left: 20px;
        line-height: 24px;
      }
    }
  }

  .camera-btn {
    float: right;
    margin-top: -10px;
  }

  .info-width {
    display: inline-block;
    width: 49%;
    padding-right: 10px;
  }

  .info-style {

  }
</style>
